<template>
    <div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits } from "vue";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");

// 字体自适应方法
const pxToRem = (px: number) => {
  const scale = document.documentElement.clientWidth / 1920;
  return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendData = props.housingSupplyStatsData.legendData;
let xAxisData = props.housingSupplyStatsData.xAxisData;
let yAxisData = props.housingSupplyStatsData.yAxisData;
let seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;
const emit = defineEmits(['dialogData'])

const getEchart = () => {
if (echartDom.value) {
  myChart.value = echarts.init(echartDom.value);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "rgba(40,252,255,0.6)",
          shadowBlur: 10,
          shadowColor: "rgba(0, 0, 0, 0.9)",
        },
      },
      textStyle: {
        color: "#fff",
        fontSize: pxToRem(15),
      },
      backgroundColor: "rgba(8, 64, 132, 0.9)",
    },
  legend: {
      show:true,
      icon: "rect",
      // left: pxToRem(0),
      right:pxToRem(0),
      top: pxToRem(3),
      itemWidth: pxToRem(24),
      itemHeight: pxToRem(12),
      itemGap: pxToRem(8),
      textStyle: {
      color: "#fff",
      fontSize: pxToRem(12),
      rich: {},
      padding: [0, 0, pxToRem(-3), 0],
      },
      data: legendData,
  },
  grid: {
      left: "0%",
      right: "5%",
      bottom: "5%",
      top: "28%",
      containLabel: true,
      },
  
  xAxis: {
      boundaryGap: true,
      data: xAxisData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#FFFFFF",
          fontSize: pxToRem(12),
        },
      },
    },
  yAxis: [
    {
        type: "value",
        name: "覆盖率",
        axisLabel: {
        formatter: "{value}",
        color: "#959699",
        fontSize: pxToRem(12),
      },
        splitLine: {
          lineStyle: {
          color: "#31679C",
          type: "dashed",
        },
        }
    }
  ],
  series: seriesData.map((data: any, index: string | number) => ({
        name: legendData[index],
        type: "line",
        smooth: true, // 是否平滑曲线显示
        // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,
        lineStyle: {
          normal: {
              color:colors[index].a // 线条颜色
          }
        },
        itemStyle : {
        normal: {
          color: colors[index].a  //图例颜色

        }
      },
        areaStyle: {
          // 区域填充样式
          normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                    { offset: 0, color: colors[index].a },
                    { offset: 1, color: colors[index].b }
                ],
                false
              )
              // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
              // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: data
    })),
  };
  myChart.value.setOption(option);
  myChart.value.getZr().on("click", (params) => {
    emit('dialogData',option)
  });
}
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  legendData = props.housingSupplyStatsData.legendData;
  xAxisData = props.housingSupplyStatsData.xAxisData;
  yAxisData = props.housingSupplyStatsData.yAxisData;
  seriesData = props.housingSupplyStatsData.seriesData;
  colors = props.housingSupplyStatsData.colors;
  typeData = props.housingSupplyStatsData.typeData;
  getEchart();
};

watchEffect(() => {
updateChart();
});
onMounted(() => {
getEchart();
window.addEventListener("resize", () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
  if (myChart.value) {
    myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
  }
});
});
</script>

<style scoped lang="less">

</style>
